<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin: 20px 60px">
	<el-form :inline="true" :model="form" class="demo-form-inline">
		<div v-for="(item,index) in form">
			<el-form-item :label="'属性' + (index +1)">
				<el-select v-model="item.attr" placeholder="属性">
					<el-option v-for="s in selectOptions" :label="s.name" :value="s.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item :label="'属性值' + (index +1)">
				<el-input v-model="item.attr_value" placeholder="属性值"></el-input>
			</el-form-item>
			<el-button type="danger" @click="removeFormItem(index)">移除</el-button>
		</div>
		<div>
			<el-form-item>
				<el-button type="default" @click="addFormItem">增加表单项</el-button>
			</el-form-item>
		</div>
		<div>
			<el-form-item>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</el-form-item>
		</div>
	</el-form>
</div>
<!-- import Vue before Element -->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	v = new Vue({
		el:"#app",
		data:{
			//商品ID
			goods_id:"{$goods_id}",
			selectOptions:[],
			form:[
				{attr:'',attr_value:''},
			]
		},
		methods:{
			//增加表单项
			addFormItem(){
				this.form.push({
					attr:'',
					attr_value: ''
				})
			},
			//移除表单项
			removeFormItem(index){
				this.form.splice(index,1)
			},
			//提交表单
			submitForm(){
				$.ajax({
					url:"{:url('Goods/setGoodsAttrValuePost')}",
					type: "POST",
					data:{
						form:this.form,
					},
					success(res){

					},
					error(){
						alert('请求失败')
					}
				})
			}
		},
		created(){
			// alert(this.goods_id)
			$.ajax({
				url:"{:url('Goods/getGoodsAttr')}",
				data:{
					goods_id:this.goods_id
				},
				success(res){
					console.log(res)
					v.selectOptions =res.data
				},
				error(){
					alert('请求失败')
				}
			})
		}
	})
</script>
</body>

</html>